<div class="Content">
	<div class="chat-contain">
		<div class="chat-main-contain">
			<div class="chat-left-contain">
				<div class="chat-left-title">
					CUSTOMERS
				</div>
				<div class="chat-left-list">
					<div class="scroll-pane" style="height: 310px">
						<ul class="chat-list">
							<? foreach($current_profile->supported_people as $item) { ?>
							<li>
								<div class="chat-list-item selected" id="chat-face-<?=$item->id?>" profile-id="<?=$item->id?>">
									<img src="<?=$item->full_image_profile_path?>" alt="avatar" style="width:30px;height:30px;" profile-id="<?=$item->id?>">
									<div class="chat-item-content">
										<div class="chat-item-content-name">
											<?=$item->full_name?>
										</div>
										<div class="chat-item-content-position">
											<?=$item->position?>
										</div>
									</div>
								</div>
							</li>
							<? } ?>
						</ul>
					</div>
				</div>
			</div>
			<? foreach($current_profile->supported_people as $item) { ?>
			<div class="chat-right-contain" id="conversation-<?=$item->id?>">
				<div class="chat-right-content">
					<div class="scroll-pane" style="height: 262px">
						<ul id="messageContainer<?=$item->id?>"></ul>
					</div>
				</div>
				<div class="chat-right-text-input">
					<input id="chatText<?=$item->id?>" class="text-chat" type="text">
				</div>
				<div class="chat-right-send-button">
					<input id="sendButton" class="send-button" type="button" value="Send" />
				</div>
			</div>
			<? } ?>
		</div>
	</div>
</div>

<script type="text/javascript ">

	var currentProfileId = <?=$current_profile->id?>;
	var currentSupportedPersonId = 25; // TODO: hardcode
	var currentProfileImage = '<?=$current_profile->full_image_profile_path?>';
	var trackingCodeArray = new Array();

	$(document).ready(function(){

		$('.scroll-pane').jScrollPane({
			scrollbarWidth : 3,
			dragMaxHeight : 50
		});

		//$('.chat-right-contain').hide();

		$('.jScrollPaneTrack').css('background','white');
		$('.jScrollPaneDrag').css('background','#CCCCCC');

		$("#sendButton").click(function(){
			postMessage(currentProfileId,currentSupportedPersonId,$('#chatText'+currentSupportedPersonId).val());
		});

		$('#chatText'+currentSupportedPersonId).keydown(function(e) {
			if (e.keyCode == 13) {
				$('#sendButton').trigger('click');
			}
		});

		setInterval('getAllMessages();',2000);

		$('.chat-list > li > div').click(function(){
			$(this).css('background-color','white');
			$('.chat-right-contain').hide();
			$('#conversation-' + $(this).attr('profile-id')).show();
			currentSupportedPersonId = $(this).attr('profile-id');
		});
	});

	function getAllMessages()
	{
		getMessage(currentProfileId,currentSupportedPersonId);
	}

	function getMessage(profileId,friendId)
	{
		$.ajax({
			type:"get",
			url:'<?=base_url()?>chat-log/get-message',
			data:{'profile_id':profileId,'friend_id':friendId,'tracking_code':trackingCodeArray[friendId]},
			async:true,
			dataType:'json',
			success:function(data){

				trackingCodeArray[friendId] = data.tracking_code;

				var imagePath = $("img[profile-id="+currentSupportedPersonId+"]").attr('src');

				for(var a=0;a < data.messages.length;a++)
				{
					var item = data.messages[a];
					$('#messageContainer'+currentSupportedPersonId).prepend('<li><div class="chat-item-friend"><img class="avatar-image" src="'+imagePath+'" alt="avatar" width="30" height="30"><div class="chat-item-content"><img class="chat-arrow" src="<?=$theme_path?>images/layout/chat/arrow-right.png" alt="arrow"><div class="chat-item-content-time"></div><div class="chat-item-content-text">'+item+'</div></div></div></li>');
				}

				if(data.messages.length > 0)
				{
					$('#chat-face-'+friendId).css('background-color','lightgray');
				}

			},
			error:function(){
			}
		});
	}

	function postMessage(profileId,friendId,message)
	{
		$.ajax({
			type:"post",
			url:'<?=base_url()?>chat-log/post-message',
			data:{'profile_id':profileId,'friend_id':friendId,'message':message},
			async:true,
			success:function(data){

				$('#chatText'+currentSupportedPersonId).val('');

				$('#messageContainer'+currentSupportedPersonId).prepend('<li><div class="chat-item-current"><img class="avatar-image" src="'+currentProfileImage+'" alt="avatar" width="30" height="30"><div class="chat-item-content"><img class="chat-arrow" src="<?=$theme_path?>images/layout/chat/arrow.png" alt="arrow"><div class="chat-item-content-time"></div><div class="chat-item-content-text">'+message+'</div></div></div></li>');

				$('.scroll-pane').jScrollPane({
					scrollbarWidth : 3,
					dragMaxHeight : 50

				});
			},
			error:function(){
			}
		});
	}

</script>